<div class="header">
  <!-- topBar -->
  <div class="site-topBar">
    <div>
      <label>
        当前在线人数: <span id="onlineCount">1</span>
      </label>
      <div class="topBar-cart">
        <a class="link">
          <i class="fa-solid fa-cart-shopping"></i>
          购物车
        </a>
        <!-- 这里由 JS 动态控制数量 -->
        <span id="topBarItemCount" class="cart-mini-num J_cartNum">（0）</span>
        <span class="cart-mini-num J_cartNum"><a href="myOrder">我的订单</a></span>

        <!-- 购物车内容区域 -->
        <div id="cartContainer" style="display: none;">
          <div id="J_miniCartMenu" class="cart-menu">
            <div class="menu-content">
              <!-- 商品列表 -->
              <ul id="J_miniCartList" class="cart-list"></ul>

              <!-- 空购物车提示 -->
              <div id="emptyCart" class="msg msg-empty" style="display: none;">
                购物车中还没有商品，赶紧选购吧！
              </div>

              <!-- 总计 -->
              <div id="J_miniCartListTotal" class="cart-total clearfix">
                <span class="total">
                  共 <em id="CartListTotalCount">0</em> 件商品
                  <span class="price">
                    <em id="CartListTotalPrice">0</em> 元
                  </span>
                </span>
                <a href="/CartCount" class="btn btn-primary btn-cart">结算</a>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="topBar-info">
        <!-- 登录后显示 -->
        <div id="loggedInSection" style="display: none;">
          <a href="javascript:void(0)" class="link" id="welcomeUser" onclick="openModal()">欢迎回来！</a>
          <a href="/mainForm?action=logout" class="link" style="margin-left: 20px;">退出登录</a>

          <!-- 编辑个人信息模态框 -->
          <div id="modal" class="modal register-container">
            <div style="opacity: 1">
              <h2>编辑个人信息</h2>
              <form id="userEditForm" method="post" action="/mainForm">
                <span>
                  <label>用户名：
                    <input type="text" placeholder="用户名" name="username" id="username" required>
                  </label>
                </span><br>
                <div id="feedback"></div>
                <span>
                  <label>邮箱：
                    <input type="email" placeholder="邮箱" name="email" id="email" required>
                  </label>
                </span><br>
                <span>
                  <label>年龄：
                    <input type="number" placeholder="年龄" name="age" id="age" min="1" required>
                  </label>
                </span><br>
                <span>
                  <label>旧密码：
                    <input type="password" placeholder="旧密码" name="OldPassword" required>
                  </label>
                </span><br>
                <span>
                  <label>新密码：
                    <input type="password" placeholder="新密码" name="NewPassword" required>
                  </label>
                </span><br>
                <input type="submit" value="更改个人信息">
              </form>
            </div>
          </div>
        </div>

        <!-- 未登录显示 -->
        <div id="notLoggedInSection">
          <a href="./login.html" class="link">登录</a>
          <span class="sep">|</span>
          <a href="/registerForm" data-register="true" class="link">注册</a>
          <span class="sep">|</span>
          <span class="message">
            <a href="#" class="J_needAgreement">消息通知</a>
          </span>
        </div>
      </div>

    </div>
  </div>
  <!-- 中间部分 -->
  <div class="site-header" style="opacity: 0.8; background-color: white">
    <div class="container">
      <!-- Logo -->
      <div class="header-logo">
        <a href="https://www.bilibili.com/bangumi/play/ep453031" title="奶龙动画" class="logo ir"
          style="background: url(/images/Logo.png) no-repeat; background-size: 56px; margin-top: 22px;">
        </a>
      </div>
      <!-- 分类导航 -->
      <div class="header-nav">
        <ul class="nav-list clearfix">
          <li class="nav-category">
            <a href="#" class="link-category">
              <span class="text">全部商品分类</span>
            </a>
            <div class="site-category" style="display: block">
              <ul class="site-category-list clearfix site-category-list-custom">
                <li class="category-item" th:each="product : ${productList}">
                  <a th:href="'#' + ${product.description}" class="title itemTitle">
                    <span th:text="${product.description}"></span>
                    <em class="iconfont-arrow-right-big"></em>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <!-- 上边框 -->
          <li class="nav-item" th:each="category : ${categoryList}">
            <a href="#" class="link" data-settrack="true">
              <span class="text" th:text="${category.name}"></span>
            </a>
            <div class="item-children">
              <div class="container">
                <ul class="children-list clearfix">
                  <!-- 可在此循环展示子分类 -->
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 搜索按钮 -->
      <div class="header-search">
        <form class="search-form clearfix">
          <label class="hide">站内搜索</label>
          <label for="search"></label>
          <input type="search" id="search" name="keyword" autocomplete="off" class="search-text" placeholder="奶龙"
            oninput="searchItem()">
          <a class="no-style-msq">
            <button class="search-btn" id="searchButton">
              <i class="fa-solid fa-magnifying-glass"></i>
            </button>
          </a>
          <div class="search-hot-words"></div>
          <div id="J_keywordList" class="keyword-list">
            <ul class="result-list">
            </ul>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>